import { useEffect, useState } from "react";
import type { Product } from "./package1/GoodsDetail";
import { products } from "@/commen/data";
import { Button, Checkbox, Stepper, Toast } from "antd-mobile";
import { Helmet } from "react-helmet-async";

interface CartProps extends Product {
  selected?: boolean;
  num?: number;
}

export default function Cart() {
  const newPro: CartProps[] = products.map((item) => {
    item.selected = false;
    item.num = 1;
    return item;
  });

  const toggleSelect = (id: number) => {
    setItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, selected: !item.selected } : item
      )
    );
  };
  const updateQuantity = (id: number, num: number) => {
    setItems((perv) =>
      perv.map((item) => (item.id === id ? { ...item, num } : item))
    );
  };
  const [items, setItems] = useState<CartProps[]>([]);
  useEffect(() => {
    setTimeout(() => {
      setItems(newPro);
    }, 1000);
  }, []);
  // 全选
  const allSelected = items.length > 0 && items.every((i) => i.selected);
  // 全选/取消全选
  const toggleSelectAll = () => {
    setItems((prev) =>
      prev.map((item) => ({ ...item, selected: !allSelected }))
    );
  };
  // 计算总价
  const total = items
    .filter((i) => i.selected)
    .reduce((sum, i) => sum + Number(i.price) * i.num!, 0);

  const handleCheckout = () => {
    if (total === 0) {
      Toast.show("请选择要结算的商品");
      return;
    }
    Toast.show(`去结算，总价：¥${total}`);
  };
  return (
    <div className="flex flex-col">
      <Helmet>
        <title>购物车</title>
      </Helmet>
      <div className="flex-1 overflow-y-auto pb-[100px]">
        {items.map((item) => {
          return (
            <div
              key={item.id}
              className="flex items-center p-4 border-b bg-white"
            >
              <Checkbox
                checked={item.selected}
                onClick={() => toggleSelect(item.id)}
              ></Checkbox>
              <img
                src={item.image}
                alt=""
                className="w-20 h-20 object-cover ml-3 rounded"
              />
              <div className="ml-3 flex-1">
                <div className="text-sm font-medium">{item.name}</div>
                <div className="text-red-500 mt-1">￥{item.price}</div>
              </div>
              <Stepper
                value={item.num}
                onChange={(val) => updateQuantity(item.id, val)}
                min={1}
              ></Stepper>
            </div>
          );
        })}
      </div>
      {/* 底部结算栏 */}
      <div className="fixed bottom-[50px] left-0 w-full flex items-center justify-between p-4 bg-white border-t">
        <div className="flex items-center">
          <Checkbox checked={allSelected} onChange={toggleSelectAll}>
            全选
          </Checkbox>
        </div>
        <div className="flex items-center">
          <span className="text-sm mr-2">
            合计: <span className="text-red-500">¥{total}</span>
          </span>
          <Button color="primary" size="small" onClick={handleCheckout}>
            去结算
          </Button>
        </div>
      </div>
    </div>
  );
}
